<template>
    <div>
        <div class="xyBox">
            <div class="top"></div>
            <div class="box1">
                <ul class="list">
                    <li>
                        <span>1、</span>使用本公司网站的客户，请留意阁下所在的国家或居住地的相关法律规定，如有疑问应就相关问题，寻求当地法律意见。
                    </li>
                    <li>
                        <span>2、</span>若发生遭黑客入侵破坏行为或不可抗拒之灾害导致网站故障或资料损坏、资料丢失等情况，我们将以本公司之后备资料为最后处理依据；为确保各方利益，请各会员投注后打印资料。本公司不会接受没有打印资料的投诉。
                    </li>
                    <li>
                        <span>3、</span>为避免纠纷，各会员在投注之后，务必进入下注明细检查。若发现任何异常，请立即与代理商联系查证，一切投注将以本公司资料库的资料为准，不得异议。如出现特殊网络情况或线路不稳定导致不能下注或下注失败。本公司概不负责。
                    </li>
                    <li>
                        <span>4、</span>开奖结果以官方公布的结果为准。
                    </li>
                    <li>
                        <span>5、</span>如遇到官方停止销售或者开奖结果不确定的情况，本公司将对相关注单进行无效处理，并且返还下注本金。
                    </li>
                    <li>
                        <span>6、</span>我们将竭力提供准确而可靠的开奖统计等资料，但并不保证资料绝对无误，统计资料只供参考，并非是对客户行为的指引，本公司也不接受关于统计数据产生错误而引起的相关投诉。
                    </li>
                    <li>
                        <span>7、</span>本公司拥有一切判决及注消任何涉嫌以非正常方式下注之权利，在进行更深入调查期间将停止发放与其有关之任何彩金。客户有责任确保自己的帐户及密码保密，如果客户怀疑自己的资料被盗用，应立即通知本公司，并须更改其个人详细资料。所有被盗用帐号之损失将由客户自行负责。
                    </li>
                </ul>
                <p style="text-align: right;margin: 20px 0px 11px;">管理层 敬啟</p>
                <div class="text-center">
                    <input type="checkbox" class="agree-btn" v-model="agreestate" checked style="vertical-align: middle;" />我了解以及同意下注列明的协定和规则。
                </div>
            </div>
            <div class="bottom">
                <input type="button" class="btn btn1" @click="noagreeBtn" />
                <input type="button" class="btn btn2" @click="agreeBtn" />
            </div>
        </div>
    </div>
</template>
<style>
    html,body{
        background: url(../../assets/images/_bg.jpg);
    }
</style>
<style scoped>
    *{
        box-sizing: initial;
        color: #eec0a9;
        font-size: 12px;
        line-height: 1.5em;
    }
    input:focus {
        outline: 0;
    }
    .xyBox{
        width: 650px;
        margin: 3% auto 0 auto;
    }
    .xyBox .top {
        width: 650px;
        height: 111px;
        background: url(../../assets/images/_xtTop.jpg) no-repeat;
    }
    .xyBox .box1 {
        width: 500px;
        height: 475px;
        padding: 0 75px;
        background: url(../../assets/images/_xtBox.jpg) no-repeat;
    }
    .xyBox .bottom {
        width: 650px;
        height: 147px;
        background: url(../../assets/images/_xtBottom.jpg) no-repeat;
        text-align: center;
    }
    .list>li{
        padding-left: 18px;
        position: relative;
        margin-bottom: 10px;
    }
    .list>li>span{
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .btn{
        width: 102px;
        height: 36px;
        background: url(../../assets/images/_xy_btn.jpg) no-repeat;
        border: 0 none;
        cursor: pointer;
        box-sizing: border-box;
    }
    .btn.btn1{
        background-position: 0 0;
    }
    .btn.btn2{
        background-position: -102px 0;
    }
    .btn.btn1:hover{
        background-position: 0 -35px;
    }
    .btn.btn2:hover{
        background-position: -102px -35px;
    }
</style>
<script>

    import axios from 'axios'
    export default {
        data(){
            return{
                agreestate: true,
            }
        },
        methods: {

            //同意
            agreeBtn(){
                
                if(this.agreestate){
                    this.$router.push({path:'/main',});
                }else{
                    alert('请仔细阅读并选择协定和规则');
                }
            },
            //不同意
            noagreeBtn(){
                window.localStorage.clear();
                this.$router.push({path:'/',});
            },
            
        },
        mounted(){
            
        },
    }
</script>